<template>
  <div class="message-container">
    <mm-nav-bar title="我的消息" right-text="全部已读" back='/my'></mm-nav-bar>
    <div class="main-container">
      <!-- 滑动单元格 -->
      <van-swipe-cell class="swipe-cell">
        <!-- 单元格组件 -->
        <mm-cell title='您提交的反馈已收到'>
          <!-- 传入的结构 -->
          <span class="point"></span>
        </mm-cell>
        <!-- 右边滑动显示 -->
        <template #right>
          <van-button class="del-btn" square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
      <van-swipe-cell class="swipe-cell">
        <mm-cell title='您提交的反馈已收到'>
          <span class="point"></span>
        </mm-cell>
        <template #right>
          <van-button class="del-btn" square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
      <van-swipe-cell class="swipe-cell">
        <mm-cell title='您提交的反馈已收到'>
          <span class="point"></span>
        </mm-cell>
        <template #right>
          <van-button class="del-btn" square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
      <van-swipe-cell class="swipe-cell">
        <mm-cell title='您提交的反馈我们已收到'>
          <span class="point"></span>
        </mm-cell>
        <template #right>
          <van-button class="del-btn" square type="danger" text="删除" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
// 导入顶部导航栏
import mmNavBar from '@/components/mmNavBar'
// 导入单元格组件
import mmCell from '@/components/mmCell'

export default {
  name: 'myMessage',
  components: {
    mmNavBar,
    mmCell
  }
}
</script>

<style lang='less'>
.message-container {
  .main-container {
    padding: 18px 15px;
    .swipe-cell {
      border-radius: 8px;
      margin-bottom: 11px;
      .point {
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background-color: @main-color;
    }
    .del-btn {
      height: 55px;
      }
    }
  }
}
</style>
